Viewer

Highlight All Links on a Page and Control Text?

This goes the bewtween <HEAD> Tags>

How Do I Get a Window To Stay on Top?

Manipulate Windows?

A main use for JavaScript is to manipulate windows and frames to make your site more easy to navigate through and so forth. A window object can be handled by a JavaScript object called window, wherreas a document object can always be opened by a JavaScript object called document. This part of our tutorial will get you more familar with JavaScript capabilities with windows and frames.

Obviously, you know a browser can open more than one window at once. Each window is represented by a Window object in JavaScript. Using JavaScript, you can have full control of opening new windows. The simplest way to open a new window is using open(). This is an important function. It can be used in several ways. Below is a simple way to open a new window using JavaScript and the open() function:


var win1="open(newwindow.html");

function new_win()

Then call it in your HTML document like so:


Open New Window

By using a # in the tag, you prevent a page from being replaced when a link is followed. Now you can open more than 1 window at a time and specify the size of the window your opening.


var win1="open(newwindow.html" "resizable=no,height=500,width=500");

function new_win()
{
var win1="open(newwindow2.html" "resizable=no,height=100,width=100");
}

This will open 2 windows; one window smaller then the other. This is quite simple and can be done for any amount of windows.

The open() function is very powerful; it provides the new window with a name and a set of window property options. Please note, the arguments to open() must be comma-separated, not space separated. In order to pop up windows without a user clicking (I must warn, can be extremely annoying!) is to not call a function. Just use:


variable-name = open("url, "windowname", 
"resizeable=no,height=100, width=100");

This is usually a bad for 2 major reasons. When the function ends and the variable goes, you loose track of the new window. It is better to keep the variable permanent, incase you want to use it again. Also, people do NOT appreciate unexpected windows popping up all over (ie Geocities, Tripod).

Java Reference?

This can be called the Appendix of our JavaScript tutorial. This guide defines all major input/output, fuctions, & objects. Please select a version of JavaScript to view its reference card.

In the reference section, superscripts indicate what version the feature was first implemented in. Red subscripts indicate which versions have known problems with the feature. NS stands for Netscape and IE stands for Microsoft Internet Explorer.

JavaScript ^NS2

<script language="JavaScript">
Runs script only if browser supports language version.

JavaScript1.1 ^NS3_{NS2
IE3}

<script language="JavaScript1.1">
Runs script only if browser supports language versi on.

JavaScript1.2 ^NS4_{NS2 NS3 IE3}

<script language="JavaScript1.2">
Runs script only if browser supports language v ersion.

JScript1.1 ^IE4_{NS2
NS3 NS4 IE3}

<script language="JScript1.1">
Runs script only if browser supports language version.
IE3: Version of JScript implemented on IE3 but IE3 does not recognize attribute.

JScript1.2 ^IE4_{NS2
NS3 NS4 IE3}

<script language="JScript1.2">
Runs script only if browser supports language version.

Java Reference?

An image rollover is the most loved JavaScript effect. We recieve more questions about rollovers alone, then any other script. The image rollover saved the name of JavaScript by erasing the bad name scrolling text gave the language. This trick will change the graphic when the mouse is moved over it.

When creating an image rollover, you need at least 2 different graphics; the one that loads with your webpage and the one that loads when the mouse is moved over the original image. In our example there is a total of 8 different images.


img1on = new Image();           // Active images
img1on.src = "image1on.gif";  
img2on = new Image(); 
img2on.src = "image2on.gif";  
img3on = new Image();
img3on.src = "image3on.gif";
img4on = new Image();
img4on.src = "image4on.gif";

img1off = new Image();          // Inactive images
img1off.src = "image1off.gif"; 
img2off = new Image();
img2off.src = "image2off.gif";  
img3off = new Image();
img3off.src = "image3off.gif";
img4off = new Image();
img4off.src = "image4off.gif";

Above you see the images called within your javascript. The first image objects called begin with img1on and run through img4on. All of the beginning image objects have the same suffix; on. The second image objects called begin with img1off and run through img4off. They share the suffix off. You do not need to name your gifs these particular names, but it is recommended because they keep them organized.

In our example, img1on is the active image (the one which is first seen) and img1off is the image which is seen when the mouse is moved over the first image. Once you have all your images set in the script, you are ready to call the actual rollover in the links on your page.


<A HREF = "yourlink.html" onMouseOver = "imgOn('img1')"
onMouseOut = "imgOff('img1')">
<IMG NAME = "img1" SRC = "image1off.gif"></A>

When calling an image rollover script, you use event handlers passing two functions onMouseOver and onMouseOut. onMouseOver runs the imgOn() function when the mouse is moved over the active image:


function imgOn(imgName) {
   if (document.images) {
       document[imgName].src = eval(imgName + "on.src");
        }
}

This function passes the name of the image to the variable imgName. Then adds on as a suffix to the graphic name. When the on suffix is added to the name, the result is the name of the active graphic img1). The same function is used when the mouse is moved off of the image. The imgOff() function is run:


function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");
        }
}

That is the mystery behind that amazing rollover function in JavaScript. We have a second tutorial on an alternative way to do image rollovers. Please read below; this script checks the browser before loading and preloads the graphics. It is a bit more complicated.

There are many ways to do an image rollover. In this example, we see that the JavaScript preloads the images, where in the first, the images must load when the mouse passes over. This example also does a browser check to make sure the browser supports the script.

The first thing you should do is have a browsercheck. The best browsercheck when we're doing a rollover is if(document.images). This checks if the browser supports the image object. The reason we do this is because there might come (I know Opera4 that comes later this spring will support it) browsers other then ns and ie that supports this, and its much easier then that navigator.appname==3.

Then next thing you should do is preload the images. First "make" a new image object with the new Image() function myimage=new Image(). Then set the src property for the image object. The src property works as in regular HTML. (myimage.src='myimage.gif')

Do I have to do that for every image you ask? Since we are very nice we have made a preloading function for you so you wont have to do that!

To make it easy to follow the rest of this tutorial you should name you images like this: You make 5 images, name them norm1.gif norm2.gif and so on. And 5 images that the norm image will change to when you mouseover, name them over1.gif over2.gif and so on. Then place all the images in a folder named images. (you can change this later if you wish)


function PreloadImages(length, path, type)
{
    for(var i = 1; i<=length; i++) {
        this[i]= new Image()
        this[i].src= path + i + type
    }
    return this
}

The function used above will preload the images. We call it with the line norm=new PreloadImages(5,'images/norm','.gif'). "norm" is the name of the array we make, "5" is the number of pics we have, "images/norm" is the path where the images is and the name of the image and ".gif" is the imagetype. This will make the images be like this: norm[1].src='images/norm1.gif and so on. Now we have to preload the over images. We do that using over=new PreloadImages(5,'images/over','.gif').

There is how to preload the images in a nutshell. If you have more then five pictures or other names on the pictures just change it in those calling lines.(example: you have 15 images, they are in the same folder as the html document, and they are named hello1.jpg hello2.jpg and so on. The line would then be: hello=PreloadImages(15,'hello','.jpg'))

Here is the functions that will switch the images (we will name the images in page later):


function rollOn(num){
    if(document.images){
        eval('document.images["norm'+num+'"].src
            ='+'over[num].src')}
}

That function is the one that changes the norm image to the over image when you mouseover. Lets go line by line:

function rollOn(num){ - This line contains the name of the function and the argument num that we will pass when we call the function.
if(document.images){ - This is the browsercheck. If the users browsers doesn't support the imagearray nothing will happen in this function.
eval('document.images["norm'+num+'"].src ='+'over[num].src')} - This line uses the eval function to execute strings.
document.images - The way to reach the image; the image is a image (obviously) and its on the document.
document.images - The name of the image, I know we haven't named them yet but we will.
over[num].src - The image that we placed in the src property of the over array earlier.

And here is the rollout function:


function rolloff(num){
if(document.images)
    eval('document.images["norm'+num+'"].src='
            +'norm[num].src')
}

This function does basically the same thing only the other way around.

Now lets make the page that the script will run on:

<HTML> <HEAD> <TITLE>Mouseover</TITLE> </HEAD> <BODY> <a href="#" onmouseover="rollOn(1)" onmouseout="rolloff(1)"> <img src="../images/norm1.gif" name="norm1" border="0"></a> <a href="#" onmouseover="rollOn(2)" onmouseout="rolloff(2)"> <img src="../images/norm2.gif" name="norm2" border="0"></a> <a href="#" onmouseover="rollOn(3)" onmouseout="rolloff(3)"> <img src="../images/norm3.gif" name="norm3" border="0"></a> <a href="#" onmouseover="rollOn(4)" onmouseout="rolloff(4)"> <img src="../images/norm4.gif" name="norm4" border="0"></a> <a href="#" onmouseover="rollOn(5)" onmouseout="rolloff(5)"> <img src="../images/norm5.gif" name="norm5" border="0"></a> </BODY> </HTML>

As you can see we name the images; norm1, norm2, norm3, norm4 and norm5. And we call the rollOn function on mouseover and the rollOff function on mouseout. The link point to # which really just means the top of the page.

Now we have to put in the finished script:

Just place this between the head tag in the page and your set!